<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 100%;
        height: 1000px;
        background: linear-gradient(45deg, #6fc7b5 0%, #13bdce, 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
        background-size: 400%;
        background-position: 0 100%;
        position: relative;
        animation: BjLoop 2s ease-in-out infinite;
    }

    .wrap * {
        left: 50%;
        top: 50%;
        position: fixed;
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }

    .Loading {
        color: #fff;
        text-shadow: 1px 1px 1px #ccc,
        0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #ff00de,
            0 0 70px #ff00de,
            0 0 80px #ff00de,
            0 0 100px #ff00de,
            0 0 150px #ff00de;
            animation: run ease-in-out 3s infinite;
            font-size: 50px;
      
    }

    .rorateBox div {
        width: 300px;
        height: 300px;
        /* border: 1px #ccc solid; */
        animation: loadingLoop 3s ease-in-out infinite;
    }

    .rorateBox div::after {
        content: '';
        display: inline-block;
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        transform: scale(0.17);
        animation: loading-dot 3s ease-in-out infinite;
    }

    .rorateBox div:nth-child(1) {
        top: 114px;
        left: -147px;
        animation-delay:0s;
    }

    .rorateBox div:nth-child(1)::after {
        right: 0px;
    }

    .rorateBox div:nth-child(2) {
        top: -118px;
        left: -116px;
        animation-delay: 0.25s;
    }

    .rorateBox div:nth-child(2)::after {
        right: 0px;
        bottom: 0;
        animation-delay: 0.25s;
    }

    .rorateBox div:nth-child(3) {
        top: -125px;
        left: 160px;
        /* animation-delay: 0.50s; */
    }

    .rorateBox div:nth-child(3)::after {
        left: 0px;
        bottom: 0;
        animation-delay: 0.50s;
    }

   
    .rorateBox div:nth-child(4) {
        top: 131px;
    left: 83px;
    }

    .rorateBox div:nth-child(4)::after {
        left: 26px;
    top: 0;
    animation-delay: 1s;
    }

    @keyframes BjLoop {
        0% {
            background-position: 0% 100%;
        }
        50% {
            background-position: 100% 0%;
        }
        100% {
            background-position: 0% 100%;        
        }
    }
    @keyframes loading-dot {
        0% {
            transform:scale(0.17);        
        }
        50% {
            transform:scale(0.5);
        }
        100% {
            transform:scale(0.17);                
        }
    }

    @keyframes loadingLoop {
        0% {
            transform: translate3d(-50%,-50%,0) rotate(0deg);        
        }
        100% {
            transform: translate3d(-50%,-50%,0) rotate(360deg);
        }
    }
    @keyframes run {
        %0{
            text-shadow: 1px 1px 1px #ccc,
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #ff00de,
                0 0 70px #ff00de,
                0 0 80px #ff00de,
                0 0 100px #ff00de,
                0 0 150px #ff00de;
        }
        25%{
            text-shadow: 1px  1px 1px #ccc,
                  0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #3EFF3E,
                   0 0 70px #3EFFff,
                   0 0 80px #3EFFff,
                   0 0 100px #3EFFee,
                   0 0 150px #3EFFee;
        }
        50%{
            text-shadow: 1px  1px 1px #ccc,
                  0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #3EFF3E,
                   0 0 70px #3EFFff,
                   0 0 80px #3EFFff,
                   0 0 100px #3EFFee,
                   0 0 150px #3EFFee;
        }
        75%{
            text-shadow: 1px  1px 1px #ccc,
                  0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #3EFF3E,
                   0 0 70px #3EFFff,
                   0 0 80px #3EFFff,
                   0 0 100px #3EFFee,
                   0 0 150px #3EFFee;
        }
    }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="Loading">💗童话💗</div>
        <div class="rorateBox">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>